This article mainly introduces the development of a react project from scratch. Now I will share it with you and give you a reference.
This article introduces the development of a react project from scratch and shares it with everyone. The details are as follows:
1. npm init generates the package.json file.
2. Install various required dependencies:
npm install --save react - Install React.
npm install -- save react-dom installs React Dom. This package is used to process virtual DOM. Let me mention here that if you use React Native, here is the installation of react-native.
npm install --save-dev webpack - Install Webpack, the most popular module packaging tool.
npm install --save-dev webpack-dev-server - A small express server from the webpack official website. The main feature is to support hot loading.
npm install --save-dev babel-core - Install Babel, you can convert ES6 to ES5, pay attention to the latest version of Babel The V6 version is divided into two modules: babel-cli and babel-core. You only need to use babel-cor here.
Install other babel dependencies (babel is really a family bucket, please go to the official website for detailed introduction...I will summarize it later, just install it all here anyway): npm install --save babel-polyfill - Babel includes a polyfill that includes a custom regenerator runtime and core.js. This will emulate a full ES6 environment
npm install --save-dev babel-loader - webpack The loader that needs to be used.
npm install --save babel-runtime - Dependencies of the Babel transform runtime plug-in.
npm install --save-dev babel- plugin-transform-runtime - Externalise references to helpers and builtins, automatically polyfilling your code without polluting globals.
npm install --save-dev babel-preset-es2015 - Babel preset for all es2015 plugins.
npm install --save-dev babel-preset-react - Strip flow types and transform JSX into createElement calls.
npm install --save-dev babel- preset-stage-2 - All you need to use stage 2 (and greater) plugins (experimental javascript).
3. Open package.json and add the following scripts:
Entering npm start on the command line will start the webpack dev server.
Entering npm build on the command line will package the production environment.
4. Start webpack
Webpack is our packaging tool. It plays a very important role in our development environment and has many very convenient features, especially hot reloading. webpack.config.js is webpack as shown below Configuration file. As the app continues to change, the configuration file will also be constantly updated. Here we use the default webpack.config.js to name this configuration file. If you use another name such as webpack.config.prod.js then The above script build needs to be changed accordingly to specify the corresponding configuration file name: "build": "webpack webpack.config.prod.js --progress --colors"
OK, the basic configuration of our project Finally done, it’s time to start writing Reac code.
React Basics - Build your first Component
Based on the basic configuration of the above project, We started writing the first component of React to get familiar with React's writing method and component ideas.
First we create a new index.html file in the project root directory. In this basic project, we use the bootstrap style and directly introduce a cdn. Then add an html tag
, and our app will be injected into this p . Finally, is introduced, which is the js code generated by the final package.
The following is the complete code:
Document
Copy after login
Create a new folder src. Most of the code of our app will be placed in this folder. Create app.js in src as the root component of React App. All other components will be injected into this component.
First we need to import react, which now uses ES6 syntax, import React from 'react'; , and then we need to introduce react-dom. This contains the most important concept of virtual dom in react. Import code: import ReactDOM
from 'react-dom';
Copy after login
Now that all the dependencies that need to be introduced have been completed, we can write the first component:
class App extends React.Component {
render(){ // Every react component has a render method.
return( // Every render method returns jsx. Jsx looks like HTML, but it's actually javascript and functions a lot like xml, with self closing tags requiring the `/` within the tag in order to work propperly
Hello World
);
}
}
Copy after login
Note that "Hello World" is written in p. All jsx The code needs to be written in a parent p.
Finally we need to render the component we wrote to Dom, here we need to use the ReactDOM.render method.
In App.js Add below: ReactDOM.render(, document.getElementById('app'));
The first parameter is the root component of our App, written in the form of . The second parameter is the main DOM element of our APP. In this project, it is the p tag with the id of app that we wrote in the index.
const List = (props) => { // we're using an arrow function and const variable type, a ES6 features
return (
I'm a list!!!
)
};
export default List;
Copy after login
在 ToDoApp.js引入 List用List 组件替换 List goes here.，写法为 .现在在浏览器中就可以看到"I'm a list!!!"
现在我们来把这个变成真实的列表，首先就需要通过props传递数据，我们把这个从state中获取的数据list通过命名为listItems的props传递，写作: ，现在 List 已经通过props获取了 ToDoApp中的数据。
然后在 List 组件中我们需要render一个列表，先用下面的jsx代码代替:
{
list // this is a variable we'll define next
}
Copy after login
注意这个大括号，js可以在这里面执行并将返回添加到view里。首先我们定义一个列表变量：
const list = props.listItems.map((el, i)=>(
// All where doing here is getting the items listItems prop
// (which is stored in the state of the parent component)
// which is an array, and we're running the .map method
// which returns a new array of list items. The key attribute is
// required, and must be unique.
el
));
Copy after login
完整的组件如下:
import React from 'react';
const List = (props) => {
const list = props.listItems.map((el, i)=>(
this.setState((previousState)=>({
list: [...previousState.list, previousState.newToDo ], // the spread opperator is called by using the ... preceding the array
}));
onListItemClick = (i) => { // takes the index of the element to be updated
this.setState((previousState)=>({
list: [
...previousState.list.slice(0, i), // slice returns a new array without modifying the existing array. Takes everything up to, but not including, the index passed in.
Object.assign({}, previousState.list[i], {done: !previousState.list[i].done}), // Object.assign is a new ES6 feature that creates a new object based on the first param (in this case an empty object). Other objects can be passed in and will be added to the first object without being modified.
...previousState.list.slice(i+1) // takes everything after the index passed in and adds it to the array.
]
}))
};
deleteListItem = (i) => {
this.setState((previousState)=>({ // using previous state again
list: [
...previousState.list.slice(0, i), // again with the slice method
...previousState.list.slice(i+1) // the only diffence here is we're leaving out the clicked element
]
}))
};
const initialState = {}; //The initial state of this reducer (will be combined with the states of other reducers as your app grows)
export default function reducer(state = initialState, action){ // a function that has two parameters, state (which is initialized as our initialState obj), and action, which we'll cover soon.
switch (action.type){
default:
return state;
}
}
Copy after login
4. 完善Store
现在我们已经完成了第一个reducer，可以将其添加到 configureStore.js 中去了， 导入： import toDoApp from './modules/toDoApp';
function mapStateToProps(state) {
return {
toDoApp: state.toDoApp // gives our component access to state through props.toDoApp
}
}
function mapDispatchToProps(dispatch) {
return {}; // here we'll soon be mapping actions to props
}
import { Provider } from 'react-redux';
import ToDoAppContainer from './containers/ToDoAppContainer';
import configureStore from './redux/configureStore';
Copy after login
configureStore is the function we created that takes our combined reducers and our redux middleware and mashes them all together. Let's intialize that with the following line:
function addItem(item){
return {
type: ADD_ITEM,
item // this is new ES6 shorthand for when the key is the same as a variable or perameter within the scope of the object. It's the same as item: item
}
}
Copy after login
Reducers
reducer是唯一可以触碰store的元素，初始值为initialState，形式上就是一个简单的switch语句，但是注意不能直接改变state，因为state是immutable。也就是说我们不能直接使用.pop or .push这些方法操作数组。
下面是示例代码:
const initialState = {
list: []
};
export default function reducer(state = initialState, action){
switch (action.type){
case ADD_ITEM:
return Object.assign(
{},
state,
{ list: [...state.list, action.item]} // here we see object.assign again, and we're returning a new state built from the old state without directly manipulating it
)
default:
return state;
}
}
Copy after login
概念已经介绍完毕，下面开始将原来的功能逻辑用redux重写。
1. Initial state
首先我们在 src/redux/modules/toDoApp中声明initialState。
const initialState = {
list: [{item: 'test', done: false}] // just added this to test that state is being passed down propperly,
newToDo: ''
};
export default function reducer(state = initialState, action){
switch (action.type){
default:
return state;
}
}
import { connect } from 'react-redux';
import ToDoApp from '../components/ToDoApp.js'
import {
inputChange
} from '../redux/modules/toDoApp'; // we added this
function mapStateToProps(state) {
return {
toDoApp: state.toDoApp // gives our component access to state through props.toDoApp
}
}
function mapDispatchToProps(dispatch) {
return {
inputChange: (value) => dispatch(inputChange(value)) // we added this
};
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(ToDoApp);
Here comes a basic application model of react redux (ducks) packaged with webpack. Although it is simple, it is the basis for us to carry out more complex projects, and with these foundations, the journey ahead will be much smoother, together Join the react family.
The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
