To see more projects of React
A javascript library for building interfaces; can make a interfaces for mobile and web; react is declarative this is that we are told what to do and not how to do it; use JSX that is HTML in JS; Is a single page application, have two libraries:
- React-DOM: web pages applications
- React-Native: mobile applications
To install create-react-app global(-g)
npm install -g create-react-appTo create react app
create-react-app APPCreate app without install react using npm(npx for install without install react)
npx create-react-app APPCreate a folder for the project
mkdir PROJECT_NAMEEnter in the folder
cd PROJECT_NAMEInitialize a repository
git initInitialize the project (-y for pre-configurations of the project)
npm init -yThen create a folder called src, public. In public folder create index.html
<!DOCTYPE html>
<html>
<head>
<title>TITLE</title>
</head>
<body>
<div id="root"></div>
</body>
</html>Install react and react-dom in the project
npm install react react-domBabel = is a javascript tool that transform the code so that all browsers can use it Install babel in the project
npm install @babel/core babel-loader @babel/preset-env @babel/preset-react --save-devCreate babel file called .babelrc and put inside
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}
Webpack = is a tol that help to compile the code of multiple files in only one, that have the code ready for the production
npm install webpack webpack-cli html-webpack-plugin html-loader --save-devIn a new file called webpack.config.js put
const path = require("path");
const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js",
},
resolve: {
extensions: [".js", ".jsx"],
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
},
},
{
test: /\.html$/,
use: [
{
loader: "html-loader",
},
],
},
],
},
plugins: [
new HtmlWebPackPlugin({
template: "./public/index.html",
filename: "./index.html",
}),
],
};In package.js in the scrips add
"build": "webpack --mode production",
"start": "webpack-dev-server --open --mode development"Compile the project
npm run buildTo install webpack server
npm install webpack-dev-server --save-devSASS = is a preprocessor that allow make CSS but with a syntax more friendly Styles with SASS
npm install mini-css-extract-plugin css-loader node-sass sass-loader --save-devESLint = is a linter that helps to follow good practices and style guides for avoid errors and follow a standard Install ESLint
npm install eslint babel-eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y --save-devCreate a file called .eslintrc for add rules for the eslint
Enter to the folder
cd APPTo start the app
npm run startInstall dependencies
npm iDelete cache and create files
npm cache clean --force- node_modules = folder with the dependencies of node js
- package.js = manage the projects and have the dependencies of production of the project
- public = folder with the public files of the project
- src = folder of source code of the project
- index.js = file that render the view, is the entry point of the application
- App.js = components in jsx of react that react-dom convert in html
React is structured in components that are classes, that are little blocks and make one application Element is an object
-
Stateful: are the most robust, these extends from React.Component. They allow us to manage state and life cycle
-
Stateless: or presentational. Are functions that return code in JSX format
- Mounting: is the introduction of the component in the dom of the index. react call the methods:
- builder: initialize the state of the values
- render: introduce the component in the code
- componentDidMount: indicates the the component was mount
- Updating: the component is rendered again, maybe for update the data
- render:
- componentDidUpdate: indicates that the component was updated, receive two arguments: props before and the state before the update
- Unmounting: when the component leaves of the page and none requires it
- componentWillUnmount: clean the memory
Props (Properties) arguments in a function
Events for manage actions
- onChange = for inputs
- onClick = for buttons
- onSubmit = for forms
Allows that the functions have features that only have the classes like:
- useState: for the manage of the states
- useEffect: for subscribe the component to its life cycle
- useReducer: execute an effect based in an action
Also allows make a custom hooks, its have to be in the function and must start with the word 'use'
It's a tool that allows make Single Page Applications (SPA) easily
- BrowserRouter: is a component that has to be at the top of the app, all things that be inside work like a SPA.
- Route: represents a path, when match with a path make the render of the component, receive tree props: match, history, location.
- Switch: inside of this go the routes.
- Link: Take the first place of the element <a>, avoid that reload the page and update the URL.
To install the react-router that use in the navigators
npm install react-router-domIs a tool that allows store the information, the principles of redux are:
- Storage: store the state
- Immutable: ever create new states
- Centralized: the information of all application is stored here
Phases of redux:
- Store: store the information
- Reducers: states
- Action creators: functions that request for information
- Component: JSX code
Add the next line in the package.json (change USERNAME and REPOSITORY for your username and your repository)
"homepage": "https://USERNAME.github.io/REPOSITORY",Run this command in bash
npm install --save gh-pagesAdd the next lines in scripts of package.json
"predeploy": "npm run build",
"deploy": "gh-pages -b master -d build",Deploy the project
npm run deploy