给老 Django 工程师的初学者 react 教程

这篇文章的文字水平一般。之所以要写这篇文章，一方面是为了记录自己的开发历程，另一方面是为了少部分同频的伙伴给予引导。也是为了完成每个月博客文章的 KPI。

前提：

• 走完 react toturial，最好能够掌握 useState。
• 了解 Javascript 语法，懂得 CSS / HTML

近期我用了 nextjs 开发了一个项目。nextjs 是一个可以全栈开发，也可以只开发前端的框架。我的开发内容只包括前端。nextjs 非常好用，简化了大量的复杂配置，可以上手即用。可以直接打开nextjs官网来安装使用。 npx create-next-app@latest

安装的时候不建议使用 typescript。这是因为 typescript 相对复杂，容易提高学习成本。tailwind 非常好用。要选上。src/ folder 可以不用。eslint 选上，能解决不少问题。

  What is your project named? my-app
  Would you like to use TypeScript? No / Yes
  Would you like to use ESLint? No / Yes
  Would you like to use Tailwind CSS? No / Yes
  Would you like to use `src/` directory? No / Yes
  Would you like to use App Router? (recommended) No / Yes
  Would you like to customize the default import alias (@/*)? No / Yes
  What import alias would you like configured? @/*

开干

我们能看到 app 下面有一个 layout.js，可以理解成 django 全栈开发中的 base.html。这个在 django 中比较常见。 在 nextjs 中，为了开发样式，一般使用 tailwind css。tailwind css 是一个通过 class 编写 style 的框架。学习 tailwind，直接从core concept开始看就行了。 那么 react 怎么用呢？ 在搭建 UI 框架阶段，实际上用到 react 的功能不多。这个时候，想要充分借助 react 的便利性，最重要的是掌握 component 这个概念。简单来说，就是能够自己创建 html tag，并且将 function 和 tag 映射起来。 创建一个 html tag

  function Hello() {
    return (<p>hello, world</p>);
  }

这样就创建好了一个 <Hello> tag。在后续中可以使用这个 tag 了。 例如，我们在 page.js 下面使用

  function Home() {
    return (
    	<div>
      	<Hello/>
      </div>
    )
  }

这样 Hello 就被渲染出来了。 除此之外，还有一个难点就是，组件之间怎么传递参数。

  function Hello(props) {
    const name = props.name;
    return (
    	<p>hello, {name}</p>;
    )
  }

通过 props 就可以传递参数了。

结语

基本上，掌握以上两个技能就可以开始基于 react 开发前端应用了。 其他的内容直接从 react、nextjs、tailwind 文档中学习即可，遇到不清楚的内容直接查询。

欢迎将不清楚的问题留言，我会根据留言的内容改进本文。