This project was bootstrapped with Create React App.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
Note: this is a one-way operation. Once you eject, you can’t go back!
If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.
-
Create app (in console):
$ npx create-react-app --template typescript my_first_react_app
-
src/index.tsx:
import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; const root = ReactDOM.createRoot( document.getElementById('root') as HTMLElement ); root.render(<App />); -
src/App.tsx:
import React from 'react'; function App() { return ( <h1>Hello React</h1> ); } export default App; -
To test set up configurations type in console:
.../my_first_react_app$ npm start
-
Install tailwind
-
in the project directiory (e.x. my_first_react_app) create dirs:
components
styles
-
$ npm init -y
create scripts for package.json
"scripts": { "start": "webpack --mode=development --watch", "build": "webpack --mode-production", ... ... }, -
$ npm i webpack webpack-cli -D
-
$ npm install @babel/core babel-loader @babel/preset-env @babel/preset-react
-
$ npm install react react-dom
-
./$ touch webpack.config.js
const path = require('path'); module.exports = { mode: 'development', entry: "./src/index.js", output: { path: path.join(__dirname, "/dist"), filename: "bundle.js" }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: "babel-loader" } }, { test: /\.css$/, use: ["style-loader", "css-loader"] } ] } }; -
npm install style-loader css-loader
-
/src$ touch index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>F1. React</title> </head> <body> <div id="root"></div> </body> </html> -
/src/components$ touch App.js
import React, {Component} from "react"; // from React import Component class App extends Component { render() { return ( <div> <h1>Hello React</h1> </div> ) } } export default App; -
/src/styles$ touch App.css
div { padding: 10px; } h1 { text-align: center; color: darkblue; }import styles to App.js
... import "../styles/App.css" ... -
/src$ touch index.js
index.js подключает App.js к index.html с помощью ReactDOM, поэтому нам необходимо их импортировать.
Все компоненты собираются в App.js.
App.js - это верхний уровень, внутрь которого подгружаются остальные компоненты. Далее, всё рендерится с помощью ReactDOM и подвязывается к index.html через <div id="root">
import React from "react"; import ReactDOM from "react-dom"; import App from "./components/App.js" ReactDOM.render(<App/>, document.getElementById("root")); -
npm i html-webpack-plugin
добавляем в webpack.config.js HtmlWebpackPlugin для рендеринга страницы:
... const HtmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { ... plugins: [ new HtmlWebpackPlugin({ template:"./src/index.html" }) ] }; -
Установим webpack сервер, чтобы не делать каждый раз перезагрузку страницы:
npm install webpack-dev-server
make changes to start script in package.json file:
"scripts": { "start": "webpack-dev-server --mode development --open", ... ... },
Если репозиторий был скачан, то сначала нужно выполнить команду:
Главный файл React --> index.js. В него импортируется компонент App.js
index.js
^
|
|
App.js
^
|
| App.css,
| class App
|
|
Header.js
^
|
| Header.css
| class Header
|
-
Добавим header в компонент реката. Для этого, в папке components создадим новый файл Header.js:
./src/components$ touch Headers.js
и добавим в него следующие строки:
import React, {Component} from "react"; import "../styles/Header.css" class Header extends Component { render(){ return( <header>This is header</header> ) } } export default Header-
В начале импортируем объект Components из React
-
Создаем новый класс для нашего компонента, который расширяет объект Component из библиотеки React
-
Далее рендерим JSX код в HTML используя функцию render()
/src/styles$ touch Header.css:
@import "App.css"; header { color: wheat; background-color: rgb(29, 41, 26); font-size: 40px; height: 60px; text-align: center; display: flex; justify-content: center; align-items: center; }
import React, { Component } from "react"; import "../styles/App.css"; ---> import Header from "./Header.js"; class App extends Component { render() { return ( <> ----> <Header /> <main> <div> <h1>Hello React</h1> </div> </main> </> ) } } export default App; -
-
Вынесем <main>...</main> из файла App.js
для этого, создадим файл: ./src/components$ touch Main.js
и перенесем из App.js весь внутри тега <main>...</main>
import React, { Component } from "react"; class Main extends Component{ render(){ return( <div> <h1>Hello Main</h1> </div> ) } } export default Main
перенесем стили из App.css в Main.js:
./src/styles$ touch Main.js
/* импортирую стили из файла */ @import "App.css"; h1 { text-align: center; color: rgb(2, 14, 6); }
В результате файлы **App.css** и **App.js** будут выглядеть так:App.css
/* подключение локальных шрифтов */ @font-face { src: url('../../fonts/OpenSans-Regular.ttf'); font-family: "OpenSans Regular"; } @font-face { src: url('../../fonts/OpenSans-Bold.ttf'); font-family: "OpenSans Bold"; } @font-face { src: url('../../fonts/OpenSans-ExtraBold.ttf'); font-family: "OpenSans ExtraBold"; } html, body { padding: 10px; margin: 10px; }App.js
import React, { Component } from "react"; // from React import Component // import styles import "../styles/App.css"; // import Header object import Header from "./Header.js"; // import Main object import Main from "./Main.js" class App extends Component { // React renders jsx --> html render() { return ( <> {/* using Header object */} <Header /> <Main /> </> ) } } export default App;
3. В Header.js класс Header переделаем в функцию и добавим вызов действия в консоль при нажатии на кнопку:
import React, { Component } from "react";
import "../styles/Header.css";
function Header() {
let buttonName = "Click Here!"
const handleClick = () => {
console.log('hello');
}
return (
<header>
This is header
<button className="click-here" onClick={handleClick}>{buttonName}</button>
</header>
)
}
export default Header
Передать переменную из App.js в Header.js можно посредствам параметра props
App.js
...
...
class App extends Component {
render() {
return (
<>
----> <Header buttonName={"Click Here!"}/>
<Main />
</>
)
}
}
export default App;
Header.js
Через ключевое слово props, функция получает передаваемые ей из App.js параметры.
В данном случае, из App.js в props передается аргумент buttonName, который вызывается через переменную props.buttonName:
...
...
---> function Header(props) {
let [count, setNewCount] = useState(0);
const handleClick = () => {
setNewCount(count + 1)
};
return (
<header>
This is header
<button className="click-here" onClick={handleClick}>
----> {props.buttonName}, is clicked: {count} times
</button>
</header>
)
}
export default Header
Add example with downloading countries
-
In order to download from the internet, we are using here axios
-
Add new component:
Countries.js
import React from "react"; function Countries() { // get countries from web return ( <h1>Hello</h1> ) } export default Countries; -
Using Countries in Main.js:
Main.js
import React from "react"; import "../styles/Main.css" import Countries from "./Countries"; function Main() { return ( <main> ---> <Countries /> </main> ) } export default Main
-
Import table styles from bootstrap to js file:
Countries.js
import Table from 'react-bootstrap/Table' ... ... return ( <Table> ... ... ... </Table> ) ... -
import styles from bootstrap to App.js
App.js
import "bootstrap/dist/css/bootstrap.min.css"
import React, { useState } from "react";
import Button from 'react-bootstrap/Button'
import "../styles/Country.css"
function Country(props) {
const [selected, addCity] = useState(false);
return (
// if selected = true: className = "selected-country", else: className = "nothing"
<tr className={!selected ? "" : "selected-country"}>
<td>{props.country.city}</td>
<td>{props.country.country}</td>
<td>
{ !selected ?
<Button variant="success" onClick={() => addCity(true)}>Add</Button> :
<Button variant="danger" onClick={() => addCity(false)}>Remove</Button>
}
</td>
</tr>
)
}
export default Country;
.selected-country{
background-color: darkgray;
}
...
import Table from 'react-bootstrap/Table'
import Country from "./Country.js"
function Countries() {
const [countries, setCountries] = useState([]);
...
return (
<Table striped bordered hover>
<thead>
<tr>
<th>City</th>
<th>Country</th>
</tr>
</thead>
<tbody>
{/*
* с помощью map() нужно отрендерить полученный список.
* на вход получаем список стране country и возвращаем => в формате jsx
*/}
{countries.map(country => <Country key={country.city} country = {country}/>)};
</tbody>
</Table>
)
}
export default Countries;
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent