meta data for this page
  •  

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
ixc2024:tech:wfrontend:implementing_planning:start [2024/05/21 15:26] – rubenhuygensixc2024:tech:wfrontend:implementing_planning:start [2024/05/28 10:58] (current) – alesta
Line 1: Line 1:
 === Implementing Your Solution === === Implementing Your Solution ===
-1. **Setting Up Project Structure**+1. **Component Architecture** 
 +   - Break down your UI into reusable components. 
 +   - Follow the Single Responsibility Principle: each component should do one thing well. 
 + 
 +2. **Setting Up Project Structure**
    - Organize your project with a clear folder structure:    - Organize your project with a clear folder structure:
  
Line 10: Line 14:
        utils/        utils/
  
-2. **Using Material-UI**+3. **Using Material-UI**
    - Import and use Material-UI components in your project:    - Import and use Material-UI components in your project:
        - Example: button        - Example: button
Line 24: Line 28:
        );        );
      }      }
 +     
 +[[https://mui.com/material-ui/getting-started/learn/||Learn Material for React]]\\
 +[[https://mui.com/material-ui/react-typography/||Material Typography]]
  
  
-3. **Version Control with Git**+4. **Version Control with Git**
    - Open GitHub Desktop    - Open GitHub Desktop
    - Log in to your GutHub account    - Log in to your GutHub account
Line 35: Line 42:
    - For more information: [[https://docs.github.com/en|GitHub Documentation]]    - For more information: [[https://docs.github.com/en|GitHub Documentation]]
  
 +5. **Using React**
 +   - Create a New React Project
 +     - In your terminal, navigate to the directory where you want to create your project.
 +     - Run the following command to create a new React application. Replace my-first-react-app with your preferred project name.
 +     - look into: https://github.com/facebook/create-react-app or refer to the [[https://create-react-app.dev/docs/getting-started/|Create React App Documentation]]
  
-5. **Component Architecture** 
-   - Break down your UI into reusable components. 
-   - Follow the Single Responsibility Principle: each component should do one thing well. 
  
-6. **Using React** +    npx create-react-app my-first-react-app 
-   - Use React's built-in state management with useState and useReducer hooks. + 
-   - For more complex state, consider using Context API or external libraries like Redux.+     - Navigate to Your Project Directory 
 +     - Move into your project directory 
 + 
 +    cd my-first-react-app 
 +     
 +   - Start the Development Server 
 +     - In the project directory, start the development server by running. This command will open a new browser window/tab with your React app running at http://localhost:3000. 
 + 
 +    npm start 
 + 
 +     - Understand the Project Structure 
 +       - Public Folder: Contains the index.html file. This is the entry point for your app. 
 +       - Src Folder: Contains the React components and styles. 
 +       - App.js: The main component. 
 +       - index.js: The entry point for the React application. 
 +   - Create Your First React Component 
 +     - Open Your Project in a Code Editor 
 +     - Use a code editor like VSCode and open the project directory. 
 +     - Edit the App Component 
 +     - Open src/App.js and replace the code with the following: 
 + 
 +    import React from 'react'; 
 +    import './App.css'; 
 +    function App() { 
 +      return ( 
 +        <div className="App"> 
 +          <header className="App-header"> 
 +            <h1>Hello, React!</h1> 
 +            <p>This is my first React app.</p> 
 +          </header> 
 +        </div> 
 +      ); 
 +    } 
 + 
 +    export default App; 
 + 
 +== Routing== 
 +Routing enables you to have multiple different pages on your Web App. Those different pages need different routes or paths to be accessed. Therefore you need to define those routes, and pages to which they lead. Take a look into [[https://www.w3schools.com/react/react_router.asp|Routes React]] for better understanding of how this works.  
 + 
 +    - Routing of the project could be done as visible here: 
 + 
 +{{:ixc2024:tech:wfrontend:implementing_planning:screenshot_2024-05-27_at_20.51.03.png?400|}} 
 + 
 +{{:ixc2024:tech:wfrontend:implementing_planning:screenshot_2024-05-27_at_20.51.08.png?400|}} 
 + 
 +{{:ixc2024:tech:wfrontend:implementing_planning:screenshot_2024-05-27_at_20.51.16.png?400|}} 
 + 
 +- Save and View Changes 
 +     - Save App.js after making changes. 
 +     - View Changes in Browser 
 +     -  
 +== Component creation == 
 +    
 +   - Add a New Component 
 +     - Create a New Component File 
 +     - In the src folder, create a new file named MyComponent.js. 
 +     - Define the New Component 
 +     - Add the following code to MyComponent.js: 
 + 
 +    import React from 'react'; 
 +    function MyComponent() { 
 +      return ( 
 +        <div> 
 +          <h2>This is a new component!</h2> 
 +        </div> 
 +      ); 
 +    } 
 +    export default MyComponent; 
 +     
 +   - Import and Use the New Component in App.js 
 +   - Open src/App.js and modify it to include MyComponent: 
 + 
 +    import React from 'react'; 
 +    import './App.css'; 
 +    import MyComponent from './MyComponent'; 
 +    function App() { 
 +      return ( 
 +        <div className="App"> 
 +          <header className="App-header"> 
 +            <h1>Hello, React!</h1> 
 +            <p>This is my first React app.</p> 
 +            <MyComponent /> 
 +          </header> 
 +        </div> 
 +      ); 
 +    } 
 +    export default App; 
 + 
 +   - Save and View Changes 
 +     - Save both App.js and MyComponent.js. 
 +     - View Changes in Browser 
 +     - The browser will reload, and you should see the new component's content below the original text. 
 + 
 +== React Hooks == 
 + 
 +Hooks are very important concept in React, because they are the core mechanism of tracking the state of data and content on the web pages.  
 + 
 +Learn about hooks: [[https://react.dev/reference/react/hooks|How to manage state]] 
 + 
 +Most useful hooks are: 
 + 
 +**useState()**  
 +  * Tracks the state of the data, the state of the variable to which it is refering 
 +  * It has it's //setState()// method which should be used as the only way of changing the contents of the tracked variable 
 + 
 +{{:ixc2024:tech:wfrontend:deploying:screenshot_2024-05-28_at_10.43.17.png?400|}} 
 + 
 +**useEffect()**  
 +  * Tracks changes that are happening in the content, and is triggered if it notices a change in the variable that it was tracking 
 +  * Tracked variable is put within the [ ] brackets at the right side 
 +  * If the brackets are left empty, the useEffect hook will activate when the page is loaded, so it can be used for triggering the fetch of the data from the backend, or for doing certain logic for setting up the page 
 +  * Otherwise, the useEffect will be triggered with the change of the variable within the brackets 
 + 
 +{{:ixc2024:tech:wfrontend:deploying:screenshot_2024-05-28_at_10.46.05.png?400|}} 
 + 
 +**useNavigate()**  
 +  * It is used for moving into another page, through code 
 +  * This can be used when we want to transfer user to a different page, for example after they complete the process of registration, they should be sent to a Welcome, or a Login page 
 + 
 +{{:ixc2024:tech:wfrontend:deploying:screenshot_2024-05-28_at_10.49.34.png?400|}} 
 + 
 +==Navigation== 
 + 
 +It is always good to implement some sort of a navigation for your users. A go-to way of doing so is by implementing a Navigation Bar - Navbar. However, navigation can also be implemented for example when we want to open a profile of another user, by clicking on the user's profile picture or their name.  
 + 
 +For implementation of Navbars: [[https://react-bootstrap.netlify.app/docs/components/navbar/|React Navbar]]  
 + 
 +{{:ixc2024:tech:wfrontend:deploying:screenshot_2024-05-28_at_10.57.37.png?400|}} 
 + 
 + 
 +For implementation of Links: [[https://mui.com/material-ui/react-link/ | React Links]] 
 + 
 +{{:ixc2024:tech:wfrontend:deploying:screenshot_2024-05-28_at_10.57.57.png?400|}} 
 + 
 + 
 + 
 + 
 +==Add personality to your Web Application == 
 + 
 +To provide users with a nice experience while using your App, it is necessary to add a custom name and an icon to your app. 
 + 
 +This information is visible in your browser tab, when your app is open and running.  
 + 
 +As visible here: 
 +  * name: ImpactXchange2024 
 +  * icon: Flag of Malaysia 
 + 
 +{{:ixc2024:tech:wfrontend:deploying:screenshot_2024-05-28_at_10.15.39.png?400|}} 
 + 
 +Setting up these two things helps your users find your application within all the other tabs that they have open.  
 + 
 +To do this you should follow the next steps: 
 +  - Choose a suitable picture for your icon 
 +    - It should be something small, that does not require a lot of space and memory 
 +  - Rename the name of the picture into __favicon.ico__ (with .ico extension) and put it in the //Public// folder of your project 
 +  - To change the name find index.html file of your project and change the text that is withing <title></title> tags 
 + 
 + {{:ixc2024:tech:wfrontend:deploying:screenshot_2024-05-28_at_10.19.50.png?400|}}
  
 +{{:ixc2024:tech:wfrontend:deploying:screenshot_2024-05-28_at_10.19.43.png?400|}}