Author: Mark

  • Disable auto closing tags in Visual Studio Code

    I personally find this feature counter productive. To do this, press Control/Command + comma to open the settings. Then put “autoClosingTags” into the search and untick it.

  • Conditional classes and toggling state

    Here’s a basic example: And you can toggle the state like so: Demo here.

  • Basic React Class Component

    Just a basic example of a React Class component:

  • Basic Flex Layout

    This site is a great reference to flex: https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-background Below I have a basic 2 column centered layout. The basics are: The body: The important part is to not set it’s height to 100% otherwise if the window is shorter than the content, you won’t be able to scroll to the top or bottom. The…

  • Vertically alligning for IE11

    It doesn’t always work like the other browsers. Here is something to try out: More info: https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/

  • Using JSON data to populate a component

    Continuing from our last post, this is now our component code: We can access the JSON using this.props.data. We can then loop through the updates using “map” and add a new table row for each update and store it all up in the variable tableRows. We also use a function getLink() that renders different things…

  • Using JSON in React

    Sample JSON data: The data is sorted by year and each update has a name and type. To import this data into a component: Import the JSON by linking to it. Set a variable to contain all the data. We then want to pick out a certain year using “find”. Then we can use that…

  • Link to other pages in React

    First you will need react-router-dom. Install it using: Here is the code that directs you to each page: BrowserRouter is the container. Switch will find and render the first page that matches the path/url. Link to the pages using NavLinks:

  • Using state to toggle content visibility

    Here is the code: We set up the default state in the constructor and bind the on click function that toggles the state using the previous state. The bind makes “this” work in the function. Then the navigation’s class updates when the state changes.

  • Using SASS with React

    It sounds simple enough. Just run npm install node-sass and change your css file file to a scss. Well… it didn’t work for me. What I need to do was update my Create-React-App to Version 2. To do this, go to packages.json and change the “react-scripts” version to 2.0.3. Simple… when you know it. Thanks…