Herramientas de usuario
wiki2:react_blind_sticks
Diferencias
Muestra las diferencias entre dos versiones de la página.
| Próxima revisión | Revisión previa | ||
|
wiki2:react_blind_sticks [2022/11/02 15:42] alfred creado |
wiki2:react_blind_sticks [2022/11/02 17:23] (actual) |
||
|---|---|---|---|
| Línea 1: | Línea 1: | ||
| ====== React Blind Sticks ====== | ====== React Blind Sticks ====== | ||
| + | ===== Commands ===== | ||
| + | |||
| + | * ''npx create-react-app my-app'' | ||
| + | * ''npx create-react-app my-app --template redux'' | ||
| + | * ''npx create-react-app my-app --template redux-typescript'' | ||
| ===== Redux ===== | ===== Redux ===== | ||
| <code javascript> | <code javascript> | ||
| Línea 29: | Línea 34: | ||
| store.dispatch({ type: 'CHANGE_BOOK_TITLE', title: 'JavaScript The Best Parts' }); | store.dispatch({ type: 'CHANGE_BOOK_TITLE', title: 'JavaScript The Best Parts' }); | ||
| store.dispatch({ type: 'CHANGE_BOOK_TITLE', title: 'How JavaScript Works' }); | store.dispatch({ type: 'CHANGE_BOOK_TITLE', title: 'How JavaScript Works' }); | ||
| + | </code> | ||
| + | |||
| + | ===== React basic ===== | ||
| + | ==== Structure ==== | ||
| + | <code> | ||
| + | src | ||
| + | ├── App.jsx | ||
| + | ├── Footer.jsx | ||
| + | ├── Header.jsx | ||
| + | ├── index.js | ||
| + | ├── TodoList.jsx | ||
| + | ├── TodoSearch.jsx | ||
| + | └── TodoView.jsx | ||
| + | public | ||
| + | ├── favicon.ico | ||
| + | ├── index.html | ||
| + | ├── logo192.png | ||
| + | ├── logo512.png | ||
| + | ├── manifest.json | ||
| + | └── robots.txt | ||
| + | </code> | ||
| + | **index.html** | ||
| + | <code> | ||
| + | <body> | ||
| + | <div id="root"></div> | ||
| + | </body> | ||
| + | </code> | ||
| + | Jsx files: | ||
| + | <code javascript> | ||
| + | // index.js | ||
| + | import React from 'react'; | ||
| + | import ReactDOM from 'react-dom'; | ||
| + | import App from './App'; | ||
| + | |||
| + | ReactDOM.render(<App />, document.getElementById('root')); | ||
| + | |||
| + | // App.jsx ----------------------------------------------------------------------------------------- | ||
| + | import Header from './Header'; | ||
| + | import TodoView from './TodoView'; | ||
| + | import Footer from './Footer'; | ||
| + | function App() { | ||
| + | return ( | ||
| + | <div> | ||
| + | <Header /> | ||
| + | <TodoView /> | ||
| + | <Footer /> | ||
| + | </div> | ||
| + | ); | ||
| + | } | ||
| + | export default App; | ||
| + | |||
| + | // Header.jsx ----------------------------------------------------------------------------------------- | ||
| + | import React from 'react'; | ||
| + | |||
| + | function Header(){ | ||
| + | return <header>Header</header> | ||
| + | } | ||
| + | |||
| + | export default Header; | ||
| + | |||
| + | // TodoView.jsx ----------------------------------------------------------------------------------------- | ||
| + | import React from 'react'; | ||
| + | import TodoSearch from './TodoSearch'; | ||
| + | import TodoList from './TodoList'; | ||
| + | |||
| + | function TodoView(){ | ||
| + | return ( | ||
| + | <div> | ||
| + | <TodoSearch /> | ||
| + | <TodoList /> | ||
| + | </div> | ||
| + | ) | ||
| + | } | ||
| + | |||
| + | export default TodoView; | ||
| </code> | </code> | ||
wiki2/react_blind_sticks.1667403737.txt.gz · Última modificación: 2022/11/02 16:42 (editor externo)
Herramientas de la página
Excepto donde se indique lo contrario, el contenido de este wiki esta bajo la siguiente licencia: CC Attribution-Noncommercial-Share Alike 4.0 International
