React从零开始(1)

96
心扬
2017.11.24 22:30 字数 634

  下午准备下班的时候,看到有人给我发了私信,是因为我5月份写了一篇ant design后台模板-1.前端环境搭建,这位同学也在使用React和ant design,想让我推荐一些资料。
  说实话,我对React的学习并不深,可以说只是因为兴趣爱好,当初学习了几天,后来团队要做一个新的项目,说句吹牛的话,若论前端技术水平,我在团队里算是最有发言权的,所以我里用周末的时间,使用Anguar、Vue、React各写了一个增删改查的demo,然后整个团队的技术人员开会讨论,最后讨论评估后,决定使用Vue,而我的React的学习,也就在这里暂停了。今天看到这个私信,我决定,重新捡起React,并进行深入的学习。

创建项目

  在目前的前端开发中,Node是必不可少的,全世界的技术大牛和爱好者们开发出了各种各样的构建工具、脚手架,为我们这些菜鸟程序员们提供了非常便利的工具,我们可以在github上找到很多的功能组件用于我们的日常项目开发中。而学习React开发,首先就是要使用一款脚手架工具,能够快速的创建出我们所需要的开发环境。

npm install -g create-react-app
create-react-app react-study-01

这样我们就创建出了一个文件夹名称为react-study-01的react工程,命令行中进入这个文件夹,执行npm start,在浏览器中就能看到运行效果。

项目目录结构

从这个目录结构来看,如果是一个从来没有接触过React的新手来使用,一下子会有点摸不着头脑,所以对这个项目进行一些改造,删掉其中的一些东西,让其成为一个干干净净的react的项目,我们就可以安装官方文档中的示例代码进行一步一步的学习了。


一个干干净净的项目结构

修改index.js中的代码

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
    <h1>Hello World</h1>, 
    document.getElementById('root')
);

JSX

const element = <h1>Hello World</h1>;

这个有意思的标签语法,既不是字符串,也不是html,我们称呼其为JSX,它是JavaScript的语法糖。

我们可以在JSX语法中使用JavaScript的函数和表达式

import React from 'react';
import ReactDOM from 'react-dom';


function formatName(user){
    return user.firstName + '  '+ user.lastName;
}

const user = {
    firstName:'Jim',
    lastName:'Green'
}

const element =(
    <h1>
    Hello {formatName(user)}
    </h1>
);

ReactDOM.render(
    element,
    document.getElementById('root')
);

React
Gupao